---
title: Prepr CMS & Astro
description: Add content to your Astro project using Prepr as a CMS
sidebar:
  label: Prepr CMS
type: cms
logo: preprcms
stub: true
i18nReady: true
---
import { Steps } from '@astrojs/starlight/components';
import { FileTree } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

[Prepr CMS](https://www.prepr.io/) is a headless CMS with built-in personalization.

## Integrating with Astro

Prepr CMS provides a [GraphQL API](https://docs.prepr.io/reference/graphql/v1/overview) to connect your data to Astro.

### Prerequisites

To get started, you will need the following:

- A new or existing Astro project configured for [on-demand rendering](/en/guides/on-demand-rendering/).
- [A free Prepr account](https://signup.prepr.io/)
- [A Prepr environment with existing blog posts](https://docs.prepr.io/account/set-up-environments#create-an-envirntonment). These posts must include a `title` and `content`. Other fields are optional.

### Setting up credentials

To add the Prepr endpoint to your Astro project, create a `.env file` in the root of your project if one does not already exist and add the following variable:

```ini title=".env"
PREPR_ENDPOINT=YOUR_PREPR_API_URL
```

You will find your `YOUR_PREPR_API_URL` value from your Prepr account settings:

<Steps>
1. Go to  **Settings > Access tokens** to view both your Preview and Production access tokens.

2. Use the **API URL** value from the **GraphQL Production** access token to only retrieve published content items for your Astro site.
</Steps>

### Configuring the Prepr endpoint

Create a new folder `src/lib/` and add a new file called `prepr.js`. This is where you will configure the Prepr endpoint. Add the following code to fetch your data from Prepr CMS:

```js title="src/lib/prepr.js"

export async function Prepr(query, variables) {
    const response = await fetch(import.meta.env.PREPR_ENDPOINT, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ query, variables }),
    })
    return response
}
```

Your root directory should now include these files:

<FileTree title="Project Structure">
- src/
  - lib/
    - **prepr.js**
- **.env**
- astro.config.mjs
- package.json

</FileTree>

### Fetching data

You will fetch your data from Prepr by writing queries to interact with its GraphQL API.

#### Create a GraphQL query to retrieve your blog articles:

<Steps>
1. Create a new folder `src/queries/` and add a file named `get-articles.js`.

2. Add the following query to this file to retrieve all articles:
    ```js title="src/queries/get-articles.js"

    const GetArticles = `
    query {
        Articles {
          items {
            _id
            _slug
            title
        }
      }
    }
    `
    export default GetArticles
    ```

3. To display a linked list of your blog posts on a page, import and execute your query, including the necessary Prepr endpoint. You will then have access to all your posts titles and their slugs to render to the page. (In the next step, you will [create individual pages for your blog posts](#creating-individual-blog-post-pages).)
    ```astro title="src/pages/index.astro" ins={3-4, 6-8, 15-23}
    ---
    import Layout from '../layouts/Layout.astro';
    import { Prepr } from '../lib/prepr.js';
    import GetArticles from '../queries/get-articles.js';

    const response = await Prepr(GetArticles)
    const { data } = await response.json()
    const articles = data.Articles
    ---

    <Layout title="My blog site">
      <h1>
        My blog site
      </h1>
      <ul>
        {
          articles.items.map((post) => (
            <li>
              <a href={post._slug}>{post.title}</a>
            </li>
          ))
        }
      </ul>
    </Layout>
    ```
</Steps>

Your root directory should include these new files:

<FileTree title="Project Structure">
- src/
  - lib/
    - prepr.js
  - pages/
    - index.astro
  - **queries**/
      - **get-articles.js**
- .env
- astro.config.mjs
- package.json
</FileTree>

#### Creating individual blog post pages

To create a page for each blog post, you will execute a new GraphQL query on a [dynamic routing](/en/guides/routing/#on-demand-dynamic-routes) `.astro` page. This query will fetch a specific article by its slug and a new page will be created for each individual blog post.

<Steps>
1. Create a file called `get-article-by-slug.js` in the `queries` folder and add the following to query a specific article by its slug and return data such as the article `title` and `content`:
    ```js title="src/lib/queries/get-article-by-slug.js"
    const GetArticleBySlug = `
    query ($slug: String) {
       Article (slug: $slug) {
         _id
         title
         content {
           __typename
           ... on Text {
             body
             text
           }
           ... on Assets {
             items {
               url
             }
           }
         }
       }
    }`

    export default GetArticleBySlug
    ```

    :::tip
    You can create and [test GraphQL queries](https://docs.prepr.io/reference/graphql/v1/test-queries) using the [Apollo explorer](https://studio.apollographql.com/sandbox/explorer) in Prepr. Open the API Explorer from the *Article* content item page in Prepr.
    The Article content is stored in a *Dynamic content field*. Check out the GraphQL docs for more details on [how to fetch the data within this field](https://docs.prepr.io/reference/graphql/v1/schema-field-types-dynamic-content-field).
    :::

2. Inside the `src/pages` folder, create a file called `[…slug].astro`. Add the following code to import and execute the query from the previous step and display the retrieved article:
    ```astro title="src/pages/[...slug].astro"
    ---
    import Layout from '../layouts/Layout.astro';
    import {Prepr} from '../lib/prepr.js';
    import GetArticleBySlug from '../queries/get-article-by-slug.js';

    const { slug } = Astro.params;
    const response = await Prepr(GetArticleBySlug, {slug})
    const { data } = await response.json()
    const article = data.Article
    ---

    <Layout title={article.title}>
      <main>
        <h1>{article.title}</h1>
        {
          article.content.map((content) => (
            <div>
              {
                content.__typename === "Assets" &&
                <img src={content.items[0].url} width="300" height="250"/>
              }
              {
                content.__typename === 'Text' &&
                <div set:html={content.body}></div>
              }
            </div>
          ))
        }
      </main>
    </Layout>
    ```
</Steps>

Your root directory should now include these new files:

<FileTree title="Project Structure">
- src/
  - lib/
    - prepr.js
  - pages/
    - index.astro
    - **[…slug].astro**
  - queries/
      - get-articles.js
      - **get-article-by-slug.js**
- .env
- astro.config.mjs
- package.json
</FileTree>

Now, when you click an article link from the main list of blog posts, you will be taken to a page with its individual content.

### Publishing your site

To deploy your Prepr blog, visit our [deployment guides](/en/guides/deploy/) and follow the instructions for your preferred hosting provider.

## Official Resources

- Follow the [Prepr CMS Astro quickstart](https://github.com/preprio/astro-quick-start) guide to make a simple blog with Astro and Prepr CMS. 
- Check out the [Connecting Prepr CMS to Astro](https://docs.prepr.io/connecting-front-end-apps/astro) for an overview of Astro and Prepr CMS resources.
